<template>
  <div class="unfinished_material">
    <one-title title="在制品出入库跟踪" @refreshData="refresh">
      <div class="mes_btn">
        <el-button
          v-btn-permission="'out'"
          @click="analog('outStored')">
          模拟出库
        </el-button>
        <el-button
          v-btn-permission="'in'"
          type="success" @click="analog('inStored')">
          模拟入库
        </el-button>
        <el-button
          v-btn-permission="'requestAgain'"
          @click="initiateRequest">
          <i class="iconfont icon-btn_issued"></i>
          重新发起请求
        </el-button>
        <!--<disabled-btn :judge="launchJudge"-->
        <!--iconClass="iconfont icon-btn_issued"-->
        <!--btnText="重新发起请求"-->
        <!--@judgeClick="initiateRequest"></disabled-btn>-->
      </div>
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        :searchList="tableColConfig"
        ref="mesSearch"
        :searchResult="searchResult"
        @searchInfo="_info">
      </mes-search-comp>
      <div class="table_container">
        <el-table
          border
          stripe
          ref="tableNode"
          v-loading="isLoading"
          element-loading-text="数据加载中"
          style="width: 100%"
          :data="listData.list"
          :max-height="tableMaxHeight"
          :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
          @row-click="row => $refs.tableNode.toggleRowSelection(row)"
          @sort-change="_sort"
          @selection-change="handleSelectionChange"
          @filter-change="handleFilterChange">
          <el-table-column
            type="selection"
            width="40"
            align="center">
          </el-table-column>
          <mes-col-comp
            :key="index"
            v-for="(column, index) in tableColConfig"
            :column="column"></mes-col-comp>
          <!--<el-table-column-->
          <!--label="操作"-->
          <!--:resizable="false"-->
          <!--fixed="right"-->
          <!--min-width="80"-->
          <!--align="center"-->
          <!--show-overflow-tooltip>-->
          <!--<template slot-scope="scope">-->
          <!--<span class="jump_item"-->
          <!--:class="{is_disabled: scope.row.semisStoreStatusValue !== 'InStoredFailed' && scope.row.semisStoreStatusValue !== 'OutStoredFailed'}"-->
          <!--@click="initiateRequest(scope.row)">发起请求</span>-->
          <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
  </div>
</template>

<script>
import tableColumns from './tableConfig'

export default {
  name: 'UnfinishedMaterial',
  data() {
    return {
      tableColConfig: tableColumns,
      isLoading: false, // 加载状态
      searchData: {}, // 搜索对象
      sortData: {}, // 排序对象
      selectData: [], // 选择列表
      searchResult: NaN, // 搜索结果数
    }
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.unfinishedMaterial.listData || {}
    },
    // 发起请求判断
    // launchJudge() {
    //   if (!this.selectData.length) return {msg: '请选择需要操作的申请单！'}
    //   if (this.selectData.some(item => item.semisStoreStatusValue !== 'InStoredFailed' && item.semisStoreStatusValue !== 'OutStoredFailed')) {
    //     return {msg: '请选择出入库状态为“入库失败”或“出库失败”的申请单进行操作！', disabled: true}
    //   }
    //   return {msg: false}
    // }
  },
  mounted() {
    this.init()
    // ["63b2c424306d4ee8bc9a41ff3cdd2093", "531e5283889a44c38381e538176b2fde"]
  },
  methods: {
    // 发起请求
    initiateRequest() {
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a//semisstore/semisStore/allRequestAgain',
        data: {
          ids: this.selectData.reduce((pre, cur) => [...pre, cur.id], [])
        },
        noCommit: true
      }).then(() => {
        this.init()
      })
    },
    // 模拟出入库
    analog(type) {
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/semisstore/semisStore/' + type,
        data: {
          ids: this.selectData.reduce((pre, cur) => [...pre, cur.id], [])
        },
        noCommit: true
      }).then(() => {
        this.init()
      })
    },
    // 初始化
    init(page) {
      this.isLoading = true
      let pageObj = page || {
        pageNo: 1,
        pageSize: this.listData.pageSize || 15
      }
      let postData = {
        method: 'post',
        url: 'a/semisstore/semisStore/list',
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize,
          query: this.searchData,
          sort: this.sortData,
        },
        module: 'unfinishedMaterial',
        state: 'listData'
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 刷新
    refresh() {
      this.$refs.mesSearch.clean()
      this.$refs.tableNode.clearSort()
      this.$refs.tableNode.clearFilter()
      this.searchData = {}
      this.sortData = {}
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 复选框选中
    handleSelectionChange(val) {
      this.selectData = val
    },
    // 列筛选回调
    handleFilterChange(filters) {
      let filterParams = this.$filterParams(this.tableColConfig, filters)
      Object.assign(this.searchData, filterParams.search)
      this.$refs.tableNode.clearSort()
      this.sortData = filterParams.order
      this.init()
    },
    // 搜索
    _info(data) {
      this.searchData = data
      this.init()
    },
  }
}
</script>

<style scoped lang="less">

</style>
